<template>
  <div class="process">
    <div class="w">
      <div class="left fl"><p>竞拍流程</p></div>
      <div class="right fl">
        <ul>
          <li class="fl">
            <router-link to="/process1" class="fl">
              <i class="bg"></i>
              <p>阅读公告</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process2" class="fl">
              <i class="bg"></i>
              <p>实地看样</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process3" class="fl">
              <i class="bg"></i>
              <p>交保证金</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process4" class="fl">
              <i class="bg"></i>
              <p>开始竞价</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process5" class="fl">
              <i class="bg"></i>
              <p>竞拍成功</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process6" class="fl">
              <i class="bg"></i>
              <p>线下付款</p>
            </router-link>
            <i class="next fl"></i>
          </li>
          <li class="fl">
            <router-link to="/process7" class="fl">
              <i class="bg"></i>
              <p>拍卖成功</p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Process",
};
</script>

<style scoped>
.process {
  width: 1920px;
  height: 100px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.w {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #979696 ;
  border: 2px;
}
.left {
  width: 130px;
  height: 100%;
  padding: 20px 10px;
  line-height: 60px;
  text-align: center;
}
.left p {
  border-right: 1px solid red;
  font-size: 18px;
}
.right {
  width: 1070px;
  height: 100%;
}
.right ul {
  width: 100%;
  height: 100%;
  display: flex;
}
.right ul li {
  flex: 1;
}
.right ul li a {
  width: 80%;
  height: 100%;
  display: block;
  text-align: center;
  padding-top: 10px;
  color: #000;
  cursor: pointer;
}
.right ul li a i.bg {
  display: block;
  background-image: url("./images/spirit.jpg");
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}
.right ul li:nth-child(1) a i.bg {
  background-position: 0 -845px;
}
.right ul li:nth-child(1):hover a i.bg {
  background-position: 0 -890px;
}

.right ul li:nth-child(2) a i.bg {
  background-position: 0 -945px;
}
.right ul li:nth-child(2):hover a i.bg {
  background-position: 0 -992px;
}

.right ul li:nth-child(3) a i.bg {
  background-position: 0 -1045px;
}
.right ul li:nth-child(3):hover a i.bg {
  background-position: 0 -1095px;
}

.right ul li:nth-child(4) a i.bg {
  background-position: 0 -1148px;
}
.right ul li:nth-child(4):hover a i.bg {
  background-position: 0 -1198px;
}

.right ul li:nth-child(5) a i.bg {
  background-position: 0 -1250px;
}
.right ul li:nth-child(5):hover a i.bg {
  background-position: 0 -1300px;
}

.right ul li:nth-child(6) a i.bg {
  background-position: 0 -1353px;
}
.right ul li:nth-child(6):hover a i.bg {
  background-position: 0 -1400px;
}

.right ul li:nth-child(7) a i.bg {
  background-position: 0 -1455px;
}
.right ul li:nth-child(7):hover a i.bg {
  background-position: 0 -1500px;
}
.next {
  background-image: url("./images/spirit.jpg");
  background-repeat: no-repeat;
  display: block;
  width: 16px;
  height: 32px;
  background-position: 0 -805px;
  margin-top: 34px;
}
</style>